<template>
        <van-index-bar :sticky="false"  :index-list="indexList">
            <van-index-anchor index="热门"  />
            <div class="city_group">
                <template v-for="(item_hot,key_hot) in groupData.hotCities">
                    <div class="city" @click="cityClick(item_hot)">{{ item_hot.cityName }}</div>
                </template>  
            </div>
            <template v-for="(item,key) in groupData.cities">
                <van-index-anchor :index="item.group" />
                <template v-for="(item_child,key_child) in item.cities">
                    <van-cell :title="item_child.cityName"  @click="cityClick(item_child)"/>
                </template>
            </template>
        </van-index-bar>
</template>

<script setup>
    import useCityStore from '@/stores/cityStore';
    import {computed} from 'vue'
    import { useRouter } from 'vue-router';
   const props= defineProps({
        groupData: {
            type: Object,
            default: ()=>({})
        }
   })
   const indexList=computed(()=>{
    const list =props.groupData.cities?.map(item=>item.group)
    list?.unshift("#")
    return  list
   })
   const router=useRouter()
   const cityStore=useCityStore()
   const cityClick=(city)=>{
    cityStore.currentCity=city
    router.back()
   }
</script>

<style lang="less" scoped>
.city_group{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 10px;
    padding-right: 25px;
    .city{
        height: 28px;
        width: 70px;
        border-radius: 14px;
        font-size: 12px;
        color: #000;
        background-color: #fff4ec;
        text-align: center;
        line-height: 28px;
        margin: 5px 0;
    }
}
</style>